<template>
  <div class="admin-layout">
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="sidebar.opened ? '210px' : '54px'">
        <div class="sidebar">
          <div class="logo">
            <h3 v-if="sidebar.opened">管理员</h3>
            <i v-else class="el-icon-user-solid"></i>
          </div>
          <el-menu
            :default-active="$route.path"
            :collapse="!sidebar.opened"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409eff"
            router
          >
            <el-menu-item index="/admin/dashboard">
              <i class="el-icon-odometer"></i>
              <span slot="title">仪表板</span>
            </el-menu-item>
            <el-menu-item index="/admin/feedbacks">
              <i class="el-icon-document"></i>
              <span slot="title">反馈管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/grid-members">
              <i class="el-icon-user"></i>
              <span slot="title">网格员管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/statistics">
              <i class="el-icon-data-analysis"></i>
              <span slot="title">统计报表</span>
            </el-menu-item>
            <el-menu-item index="/admin/settings">
              <i class="el-icon-setting"></i>
              <span slot="title">系统设置</span>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      
      <!-- 主体内容 -->
      <el-container>
        <!-- 顶部导航 -->
        <el-header height="60px">
          <div class="navbar">
            <div class="navbar-left">
              <el-button 
                type="text" 
                @click="toggleSidebar"
                class="sidebar-toggle"
              >
                <i class="el-icon-s-unfold" v-if="!sidebar.opened"></i>
                <i class="el-icon-s-fold" v-else></i>
              </el-button>
              <span class="page-title">{{ $route.meta.title || '管理员系统' }}</span>
            </div>
            <div class="navbar-right">
              <el-dropdown @command="handleCommand">
                <span class="user-dropdown">
                  {{ userInfo.adminCode || '管理员' }}
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="logout">
                    <i class="el-icon-switch-button"></i>
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        
        <!-- 页面内容 -->
        <el-main>
          <router-view />
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'AdminLayout',
  computed: {
    sidebar() {
      return this.$store.getters['app/sidebar']
    },
    userInfo() {
      return this.$store.getters['user/userInfo']
    }
  },
  methods: {
    toggleSidebar() {
      this.$store.dispatch('app/toggleSideBar')
    },
    handleCommand(command) {
      if (command === 'logout') {
        this.handleLogout()
      }
    },
    async handleLogout() {
      try {
        await this.$store.dispatch('user/logout')
        this.$message.success('退出登录成功')
        this.$router.push('/login')
      } catch (error) {
        this.$message.error('退出登录失败')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.admin-layout {
  height: 100vh;
  
  .el-container {
    height: 100%;
  }
  
  .el-aside {
    background: #304156;
    transition: width 0.28s;
  }
}

.sidebar {
  height: 100%;
  
  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #2b2f3a;
    color: #fff;
    
    h3 {
      margin: 0;
      font-size: 18px;
    }
    
    i {
      font-size: 24px;
    }
  }
  
  .el-menu {
    border-right: none;
    height: calc(100% - 60px);
  }
}

.navbar {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  
  .navbar-left {
    display: flex;
    align-items: center;
    
    .sidebar-toggle {
      font-size: 18px;
      margin-right: 15px;
    }
    
    .page-title {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
  
  .navbar-right {
    .user-dropdown {
      cursor: pointer;
      color: #333;
      font-size: 14px;
      
      &:hover {
        color: #409eff;
      }
    }
  }
}

.el-main {
  background: #f0f2f5;
  padding: 20px;
}
</style> 